import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { HotRecommendWrapper } from "./style";
import ThemeHeader from "@/components/theme-header";
import SongsCard from "@/components/songs-card";
import { getHotRecommendsAction } from "../../store/actionCreators";

const hotRecommend = memo(() => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getHotRecommendsAction(8));
  }, [dispatch]);

  const { hotRecommends } = useSelector(
    (state) => ({ hotRecommends: state.getIn(["recommend", "hotRecommends"]) }),
    shallowEqual
  );
  return (
    <HotRecommendWrapper>
      <ThemeHeader
        title="热门推荐"
        keywords={["华语", "流行", "民谣", "摇滚", "电子"]}
      />
      <div className="recommend-list">
        {hotRecommends.map((item) => {
          return <SongsCard info={item} key={item.id} />;
        })}
      </div>
    </HotRecommendWrapper>
  );
});

export default hotRecommend;
